<template>
  <div class="wraps">
    <div>
      <div class="header_wrap between">
        <div class="header fl">
          <div class="tab" :class="{ active: active == index }" v-for="(item, index) in tabs" :key="index" @click="handleChange1(index)">
            {{ item.name }}
          </div>
        </div>
        <div>时间范围： <a-range-picker @change="panelChange" /></div>
      </div>
    </div>
    <div class="warp fl">
      <div class="left_part">
        <div class="content">
          <div class="cars" v-for="(item, index) in cards" :key="index">
            <a-card>
              <div class="car">
                <h3 class="title">{{ item.name }}</h3>
                <div class="time">{{ form.startTime || '2010-12-12' }}~{{ form.endTime || item.endTime }}</div>
                <div class="nums">
                  {{ nurseDataAnalysis[item.value] }}
                  <span class="unit">{{ item.unit }}</span>
                </div>
              </div>
            </a-card>
          </div>
        </div>
      </div>
      <div class="right_part">
        <a-card>
          <div class="items" v-if="personData">
            <div class="item">
              <div>总转化率{{ (personData.homeToPayOver * 100).toFixed(2) }}%</div>
              <div class="row between">
                <div class="left">第一步: 进入首页</div>
                <div class="num">{{ personData.home }}人</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (personData.homeToDetail * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第二步: 浏览服务详情页</div>
                <div class="num">{{ personData.detail }}人</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (personData.detailToOrder * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第三步:服务项目介绍页</div>
                <div class="num">{{ personData.orderPage }}人</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (personData.orderToPay * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第四步: 支付页</div>
                <div class="num">{{ personData.payPage }}人</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (personData.payToPayOver * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第五步: 支付成功页</div>
                <div class="num">{{ personData.payOverPage }}人</div>
              </div>
            </div>
          </div>
          <!-- <a-steps direction="vertical" size="small" :current="1">
            <a-step title="进入首页" description="This is a description." />
            <a-step title="浏览服务详情页" description="This is a description." />
            <a-step title="下单页" description="This is a description." />
            <a-step title="支付页" description="This is a description." />
            <a-step title="支付成功页" description="This is a description." />
          </a-steps> -->
        </a-card>
      </div>
    </div>
    <div class="warp bottom">
      <div class="left_part">
        <a-card>
          <div class="header_wrap between">
            <div class="header fl">
              <div
                class="tab"
                :class="{ active: activeChart == item.value }"
                v-for="(item, index) in chartTabs"
                :key="index"
                @click="handleChartActive(item.value)"
              >
                {{ item.name }}
              </div>
            </div>
            <!-- 日期选择框 -->
            <a-select ref="select" v-model:value="searchForm.type" @focus="focus" @change="handleChange" placeholder="请选择">
              <a-select-option v-for="item in times" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </div>

          <div class="char_wrap">
            <VueChart :options="options" />
          </div>
        </a-card>
      </div>
      <div class="right_part">
        <a-card>
          <div class="items" v-if="timeData">
            <div class="item">
              <div>总转化率{{ (timeData.homeToPayOver * 100).toFixed(2) }}%</div>
              <div class="row between">
                <div class="left">第一步: 进入首页</div>
                <div class="num">{{ timeData.home }}次</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (timeData.homeToDetail * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第二步: 浏览服务详情页</div>
                <div class="num">{{ timeData.detail }}次</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (timeData.detailToOrder * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第三步: 服务项目介绍页</div>
                <div class="num">{{ timeData.orderPage }}次</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (timeData.orderToPay * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第四步: 支付页</div>
                <div class="num">{{ timeData.payPage }}次</div>
              </div>

              <arrow-down-outlined class="arrow" />
              <div class="percent">{{ (timeData.payToPayOver * 100).toFixed(2) }}%</div>
            </div>
            <div class="item">
              <div class="row between">
                <div class="left">第五步: 支付成功页</div>
                <div class="num">{{ timeData.payOverPage }}次</div>
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
    <a-card>
      <h2>订单分布</h2>
      <div class="map" v-if="nurseDataMap.length > 0">
        <Map :propValue="nurseDataMap" title="订单数量" />
      </div>
    </a-card>
  </div>
</template>
<script>
import { userData, trendAnalyse, getIncidentCount, getIncidentPerson } from '@/api/analysis/index'
import Map from './Map.vue'
import { ArrowDownOutlined } from '@ant-design/icons-vue'
import a1 from '@/assets/img/analysis/1.png'
import a2 from '@/assets/img/analysis/1.png'
import a3 from '@/assets/img/analysis/1.png'
import a4 from '@/assets/img/analysis/1.png'
import a5 from '@/assets/img/analysis/1.png'
import a6 from '@/assets/img/analysis/1.png'
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import * as api from '@/api/analysis/index'
import { times } from '@/utils/dict.js'
import moment from 'moment'
import { CheckOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useModal } from '@/hooks'
import { message, Modal } from 'ant-design-vue'
export default {
  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    ArrowDownOutlined,
    Map
  },
  setup() {
    const formRef = ref('')
    const form = reactive({
      createDate: '',
      startTime: '',
      endTime: '',
      dateType: 0
    })
    const rules = {}
    const data = reactive({
      personData: {},
      timeData: {},
      searchForm: { type: 1 },
      nurseDataAnalysis: {},
      nurseDataMap: [],
      trendDataAnalysis: {},
      chartData: {},
      times,
      list: [],
      id: '',
      modalForm: {},
      time: [],
      cards: [
        {
          name: '注册用户数',
          value: 'userNumber',
          unit: '人',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a1
        },
        {
          name: '订单量',
          value: 'orderNumber',
          unit: '单',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a2
        },
        {
          name: '交易金额',
          value: 'sumPrice',
          unit: '元',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a3
        },
        {
          name: '下单人数',
          value: 'placeAnOrderNumber',
          unit: '人',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a4
        },
        {
          name: '退款金额',
          value: 'refundPrice',
          unit: '元',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a5
        },
        {
          name: '客单价',
          value: 'unitPrice',
          unit: '元',
          startTime: '',
          endTime: moment(new Date()).format('YYYY-MM-DD'),
          img: a6
        }
      ],
      active: 0,
      activeChart: 'userNumberByDay',
      chartTabs: [
        { name: '注册用户数', value: 'userNumberByDay' },
        { name: '订单量', value: 'orderNumberByDay' },
        { name: '交易金额', value: 'priceNumberByDay' },
        { name: '下单人数', value: 'placeAnOrderNumberByDay' }
      ],
      tabs: [
        { name: '全部', value: '0', name1: '' },
        { name: 'app', value: '1', name1: 'app' },
        { name: '小程序', value: '2', name1: '小程序' },
        { name: '阿里健康', value: '3', name1: '阿里健康' },
        { name: '点点医生', value: '4', name1: '点点医生' }
        // { name: "慧医科技", value: "5", name1: '慧医科技' },
      ]
    })
    const retComputed = {
      options: computed(() => {
        return {
          title: {
            text: '趋势分析'
          },
          tooltip: {
            trigger: 'axis'
          },
          // legend: {
          //   // data: ["本月"],
          // },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            // top:'12%',
            containLabel: true
          },
          // toolbox: {
          //   feature: {
          //     saveAsImage: {},
          //   },
          // },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.chartData.xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'line',
              smooth: true,
              stack: 'Total',
              data: data.chartData.yAxis
            }
          ]
        }
      })
    }
    const loading = ref(true) //表格的加载

    const visible = ref(false)

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
      total: 0
    })

    //   端口列表
    const ports = reactive([
      {
        name: '全部',
        id: ''
      },
      {
        name: '用户端',
        id: 1
      },
      {
        name: '护士端',
        id: 2
      }
    ])
    // 状态列表
    const statusList = reactive([
      {
        name: '全部',
        id: ''
      },
      {
        name: '未处理',
        id: 0
      },
      {
        name: '已处理',
        id: 1
      }
    ])

    const showModal = () => {
      visible.value = true
    }

    const handleOk = e => {
      console.log(e)
      visible.value = false
    }

    // 查询
    const search = () => {
      // console.log(form, "表单内容");
      page.current = 1
      init()
    }
    // 选择时间
    const panelChange = (date, dateString) => {
      console.log('选择的时间是', dateString)
      form.startTime = dateString[0]
      form.createDate = dateString[0]
      form.endTime = dateString[1]
      getBaseData()
      getMyData()
      getMapData()
    }

    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        className: 'table',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'mobile'
        }
      },
      {
        title: '反馈内容',
        dataIndex: 'content',
        className: 'table',
        ellipsis: true,
        align: 'center'
      },
      {
        title: '反馈日期',
        dataIndex: 'createdAt',
        className: 'table',
        sorter: true,
        align: 'center'
      },
      {
        title: '图片',
        dataIndex: 'feedbackPic',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'img'
        }
      },
      {
        title: '状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'operation'
        }
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize

      // 请求列表接口
      init()
    }

    // 查看
    const look = (item, id) => {
      data.modalForm = item
      visible.value = true
      data.id = id
    }

    // 处理
    const deal = (item, id) => {
      data.modalForm = item
      visible.value = true
      data.id = id
    }
    const handleChartActive = index => {
      data.activeChart = index

      data.chartData.yAxis = []
      data.chartData.xAxis = []

      data.trendDataAnalysis[index].map(m => {
        data.chartData.xAxis.push(m.date)
        if (index == 'priceNumberByDay') {
          data.chartData.yAxis.push(m.price)
        } else {
          data.chartData.yAxis.push(m.count)
        }
      })
    }
    const handleChange1 = index => {
      data.active = index
      // 基础数据
      getBaseData()
      // pv/uv
      getMyData()
      // 地图
      getMapData()
      // 折线图
      getTrendData()
    }
    const handleChange = () => {
      init()
    }
    const save = () => {
      const { closeModal } = useModal.confirm({
        title: () => '确定已经处理了吗?',
        icon: () => createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          let res = await updateFeedBack(data.id)
          if (res.success) {
            message.success('处理成功')
            visible.value = false
            init()
            closeModal()
          }
        }
      })
    }
    init()
    async function getBaseData() {
      // 基础数据
      userData({ ...form, sourceType: data.active }).then(r => {
        data.nurseDataAnalysis = r.object
      })
    }
    async function getMapData() {
      let obj = {
        type: data.active
      }
      if (form.startTime) {
        obj = {
          type: data.active,
          startTime: form.startTime,
          endTime: form.endTime
        }
      }
      api.userOrderDate({ ...obj }).then(q => {
        let list = q.object
        data.nurseDataMap = list.map(m => {
          let reg = new RegExp('省')
          let reg1 = new RegExp('市')
          let name = m.provinceName.replace(reg, '')
          name = name.replace(reg1, '')
          return {
            name: name,
            value: m.orderNum
          }
        })
        console.log(data.nurseDataMap, '=========')
      })
    }
    async function getTrendData() {
      trendAnalyse({
        dateType: data.searchForm.type,
        source: data.active
      }).then(r => {
        // data.trendData = r.object;
        data.trendDataAnalysis = r.object
        handleChartActive(data.activeChart)
      })
    }
    async function getMyData() {
      getIncidentCount({
        createDate: form.createDate,
        endTime: form.endTime,
        source: data.tabs[data.active].name1
      }).then(r => {
        data.timeData = { ...r.object }
      })
      getIncidentPerson({
        createDate: form.createDate,
        endTime: form.endTime,
        source: data.tabs[data.active].name1
      }).then(r => {
        console.log(r, 'rrrrr')
        data.personData = { ...r.object }
      })
    }
    async function getLineChart() {
      // 基础数据
      userData({ ...form, sourceType: data.active }).then(r => {
        data.nurseDataAnalysis = r.object
      })
    }
    async function init() {
      data.loading = true
      // 基础数据
      getBaseData()
      // 基础数据
      getMyData()
      // 地图
      getMapData()
      // 折线图
      getTrendData()
      // let res = await selectAllFeedBack(obj);
      // if (res.success) {
      //   if (res.object) {
      //     res.object.records.map((el) => (el.key = el.id));
      //     data.list = res.object.records;
      //     page.total = res.object.total;
      //   } else {
      //     data.list = [];
      //   }
      //   data.loading = false;
      // }
      data.loading = false
    }

    return {
      ...retComputed,
      ...toRefs(data),
      // getBaseData,
      ports,
      formRef,
      form,
      rules,
      columns,
      pagination,
      statusList,
      visible,
      handleTableChange,
      search,
      panelChange,
      deal,
      look,
      showModal,
      handleOk,
      save,
      handleChartActive,
      handleChange,
      handleChange1
    }
  }
}
</script>
<style scoped lang="less">
.ant-card-body {
  padding: 16px !important;
}
.img {
  width: 50px;
  height: 50px;
  margin-left: 20px;
}
.title {
  font-weight: bold;
}
.ant-row {
  margin-bottom: 20px;
}
.map {
  width: 100%;
  height: 500px;
}
.wraps {
  padding: 20px;
}
.header_wrap {
  margin-bottom: 30px;
}
.header {
  .tab {
    padding: 6px 24px;
    margin-left: 16px;
    background: #eee;
    border-radius: 4px;
    &.active {
      color: #fff;
      background: #006d77;
    }
  }
}
.warp {
  display: flex;
  margin-bottom: 20px;
  // &.bottom{
  //   .left_part{
  //     flex: 5 !important;
  //   }
  //   // .right_part {
  //   // margin-left:30px!important;
  //   // }
  // }
  .left_part {
    flex: 4.6;

    .char_wrap {
      width: 80%;
      height: 400px;
    }
  }
  .right_part {
    margin-left: 20px;

    flex: 2;
    .items {
      .item {
        position: relative;
        padding: 6px 12px;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 40px;
      }
      .left {
      }
      .num {
      }
      .arrow {
        position: absolute;
        bottom: -30px;
        left: 94px;
        display: block;
      }
      .percent {
        position: absolute;
        bottom: -34px;
        left: 114px;
      }
    }
  }
}
.content {
  display: flex;
  flex-wrap: wrap;
  .cars {
    padding: 9px;
    width: 50%;
    .car {
      .title {
      }
      .nums {
        margin-top: 6px;
        font-size: 24px;
      }
    }
  }
}
// iv class="content">
//         <div class="cars" v-for="(item, index) in cards" :key="index">
//           <a-card>
//             <div class="car">
//               <div class="title">{{ item.name }}</div>
//               <div class="time">{{ item.time }}</div>
//               <div class="nums">
//                 {{ item.value }} <span class="unit">{{ item.unit }}</span>
//               </div>
</style>
